
<template>
  <div>
    <el-row>
      <el-col :span="4"><el-input v-model="searchForm.dname" placeholder="请输入课程名称" size="mini"></el-input> </el-col>
<!--      <el-col :span="4"><el-input v-model="searchForm.loc" placeholder="请输入部门位置" size="mini"></el-input> </el-col>-->
      <el-col :span="6">
        <el-button type="primary" icon="el-icon-search" @click="loadData" size="mini">搜索</el-button>
        <el-button type="primary" icon="el-icon-circle-plus" @click="handlerAdd" size="mini">添加</el-button>
      </el-col>
      <el-col :span="4">   </el-col>
      <el-col :span="4"> </el-col>
      <el-col :span="2"> </el-col>
    </el-row>

    <!--table数据-->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="#" width="180">
      </el-table-column>
      <el-table-column prop="zoneId" label="专区编号" width="180">
      </el-table-column>
      <el-table-column prop="zoneName" label="专区名称" width="180">
      </el-table-column>
      <el-table-column prop="courseId" label="课程ID" width="180">
      </el-table-column>
      <el-table-column prop="title" label="课程名称" width="180">
      </el-table-column>
      <el-table-column prop="isDisable" label="状态" width="90"> </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间"> </el-table-column>
      <el-table-column prop="gmtModified" label="修改时间"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 3, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
    >
    </el-pagination>

    <!--添加对话框-->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules"  ref="form">
        <el-form-item
                label="选择专区编号"
                prop="id"
                :label-width="formLabelWidth"
        >
          <el-select v-model="form.zoneId" placeholder="请选择">
            <el-option
                    v-for="item in zoneData"
                    :key="item.id"
                    :label="item.zoneName"
                    :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
                label="选择课程ID"
                prop="courseId"
                :label-width="formLabelWidth"
        >
          <el-select v-model="form.courseId" placeholder="请选择">
            <el-option
                    v-for="item in courseData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth" prop="isDeleted">
          <el-input-number v-model="isDeleted" :min="0"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insert('form')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [], //列表数据
        isDeleted: 0,
        zoneData:[],  //专区
        courseData:[], //课程
        isDisable: '',
        currentPage: 1, //页码  第几页
        pageSize: 5, //每页显示数量
        total: 400, //总数量
        searchForm:{zoneName:'',loc:''},//查询表单
        title:'课程',//弹出对话框标题
        dialogFormVisible: false,//弹出对话框是否显示，默认不显示
        form:{

        },//添加或者更新form对象
        rules: {
          zoneName: [
            { required: true, message: '请输入课程名称名称', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          zoneDesc: [
            { required: true, message: '请输入课程描述', trigger: 'blur' },
            { min: 2, max: 100, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ]},
        formLabelWidth: '120px',//formLabel的宽度
      };
    },
    created() {
      //初始化页面执行业务区
      //直接调用
      this.loadData();
      this.AAA();
      this.BBB()
    },
    methods: {
      //加载数据方法
      loadData() {
        var _this = this;
        // alert(this.tableData);
        this.$http
                .post("/zoneCourse/queryByPage", //请求url
                    { data: this.searchForm, pageNo: this.currentPage, pageSize: this.pageSize }
                ) //请求参数
                .then(function (response) {
                  //成功回调
                  console.log(response);
                  //stringify 把json对象转json字符串
                  //alert(JSON.stringify(response));
                  //判断是否回调成功
                  if (response.data.code == 200) {
                    //赋值
                    _this.tableData = response.data.data.list;
                    _this.total = response.data.data.total;
                  }
                })
                .catch(function (error) {
                  //错误回调
                  console.log(error);
                });
      },


      //加载数据方法
      AAA() {
        var _this = this;
        // alert(this.tableData);
        this.$http
                .get("/zone/queryAll", //请求url

                ) //请求参数
                .then(function (response) {
                  //成功回调
                  console.log(response);
                  //stringify 把json对象转json字符串
                  //alert(JSON.stringify(response));
                  //判断是否回调成功
                  if (response.data.code == 200) {
                    //赋值
                    _this.zoneData = response.data.data;
                  }
                })
                .catch(function (error) {
                  //错误回调
                  console.log(error);
                });
      },
      //加载数据方法
      BBB() {
        var _this = this;
        // alert(this.tableData);
        this.$http
                .get("/courseMarket/selectAllByName", //请求url

                ) //请求参数
                .then(function (response) {
                  //成功回调
                  console.log(response);
                  //stringify 把json对象转json字符串
                  //alert(JSON.stringify(response));
                  //判断是否回调成功
                  if (response.data.code == 200) {
                    //赋值
                    _this.courseData = response.data.data;
                  }
                })
                .catch(function (error) {
                  //错误回调
                  console.log(error);
                });
      },
      //每页数量发生变化
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.loadData();
      },
      //页码发生变化
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.loadData();
      },
      //处理添加
      handlerAdd(){
        this.title='课程添加';
        //清除缓存值
        this.form={};
        //显示对话框
        this.dialogFormVisible=true;
      },
      //处理编辑
      handleEdit(index, row) {
        console.log(index, row);
        this.title='课程更新';
        this.form  = row;

        //显示对话框
        this.dialogFormVisible=true;
      },
      //处理删除
      // handleDelete(index, row) {
      //   console.log(index, row);
      // },
      //处理添加操作
      insert(formName){
        //校验表单
        this.$refs[formName].validate((valid) => {
          if (valid) {
           if (this.title=='课程添加'){
             // alert('submit!');
             var  url = '/zoneCourse/add';
             var _this = this;
             // alert(this.tableData);
             _this.createBy = localStorage.getItem("zoneName");
             this.$http
                     .post(
                             url,{
                               courseId:_this.form.courseId,
                               zoneId:_this.form.zoneId,
                               isDeleted:_this.isDeleted
                             }
                     ) //请求参数
                     .then(function (response) {
                       //成功回调
                       console.log(response);
                       //stringify 把json对象转json字符串
                       //alert(JSON.stringify(response));
                       //判断是否回调成功
                       if (response.data.code == 200) {
                         //打印成功提示
                         _this.$message({
                           message: '恭喜你，这是一条成功消息',
                           type: 'success'
                         });
                         //关闭窗口
                         _this.dialogFormVisible=false;
                         //重新加载数据
                         _this.loadData();
                       }else{
                         //错误提示
                         _this.$message.error('错了哦，这是一条错误消息');
                       }
                     })
                     .catch(function (error) {
                       //错误回调
                       console.log(error);
                       _this.$message.error('错了哦，这是一条错误消息');
                     });
           }
            if (this.title == '课程更新') {
              // alert('submit!');
              var url = '/zoneCourse/edit';
              var _this = this;
              // alert(this.tableData);
              _this.updateBy = localStorage.getItem("zoneName");
              this.$http
                      .put(
                              url, _this.form
                      ) //请求参数
                      .then(function (response) {
                        //成功回调
                        console.log(response);
                        //stringify 把json对象转json字符串
                        //alert(JSON.stringify(response));
                        //判断是否回调成功
                        if (response.data.code == 200) {
                          //打印成功提示
                          _this.$message({
                            message: '恭喜你，这是一条成功消息',
                            type: 'success'
                          });
                          //关闭窗口
                          _this.dialogFormVisible = false;
                          //重新加载数据
                          _this.loadData();
                        } else {
                          //错误提示
                          _this.$message.error('错了哦，这是一条错误消息');
                        }
                      })
                      .catch(function (error) {
                        //错误回调
                        console.log(error);
                        _this.$message.error('错了哦，这是一条错误消息');
                      });
            } else {
              console.log('error submit!!');
              return false;
            }
          }
        });
      },

      //删除
      handleDelete(index, row) {
        console.log(row)
        console.log(index, row);
        var _this = this;
        this.id=row.id
        this.$http.delete(
                '/zoneCourse/deleteById?id='+_this.id

        )//请求参数
                .then(function (response) {
                  //成功回调
                  console.log(response);
                  if (response.data.code == 200) {
                    //打印成功提示
                    _this.$message({
                      message: '删除成功',
                      type: 'success'

                    });
                    _this.loadData();
                  }
                })
                .catch(function (error) {
                  console.log(error);
                  _this.$message.error('删除失败');
                });
      },
    },
  };
</script>


<!--<template>-->
<!--  <div>-->
<!--    <el-row>-->
<!--      <el-col :span="8" align="left">-->
<!--        &lt;!&ndash; 新增按钮 &ndash;&gt;-->

<!--        <el-button-->
<!--          type="primary"-->
<!--          @click="-->
<!--            (dialogVisible = true),-->
<!--              (add.dname = ''),-->
<!--              (add.loc = ''),-->
<!--              (title = '新增内容')-->
<!--          "-->
<!--          icon="el-icon-circle-plus"-->
<!--          style="left:auto"-->
<!--          >新增</el-button-->
<!--        ></el-col-->
<!--      >-->
<!--      <el-col :span="16" align="left"-->
<!--        >&lt;!&ndash; 查询表单 &ndash;&gt;-->
<!--        <el-form :inline="true" class="demo-form-inline">-->
<!--          <el-form-item>-->
<!--            <el-input v-model="dname" placeholder="请输入部门名称"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item>-->
<!--            <el-input v-model="loc" placeholder="请输入地址"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item>-->
<!--            <el-button type="primary" @click="pagelode">查询</el-button>-->
<!--          </el-form-item>-->
<!--          <el-form-item>-->
<!--            <el-button type="primary" @click="clearSerach">清空</el-button>-->
<!--          </el-form-item>-->
<!--        </el-form></el-col-->
<!--      >-->
<!--    </el-row>-->
<!--    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">-->
<!--      <el-form :inline="false" class="demo-form-inline">-->
<!--        <el-form-item label="部门名称">-->
<!--          <el-input-->
<!--            v-model="add.dname"-->
<!--            width="100px"-->
<!--            placeholder="请输入部门名称"-->
<!--          ></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="地址">-->
<!--          <el-input v-model="add.loc" placeholder="请输入地址"></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="submitMsg">确 定</el-button>-->
<!--      </span>-->
<!--    </el-dialog>-->
<!--    <el-table :data="tableData" border style="width: 100%">-->
<!--      <el-table-column prop="deptno" label="ID" width="180"></el-table-column>-->
<!--      <el-table-column-->
<!--        prop="dname"-->
<!--        label="部门名称"-->
<!--        width="180"-->
<!--      ></el-table-column>-->
<!--      <el-table-column prop="loc" label="地址" width="180"></el-table-column>-->
<!--      <el-table-column label="操作">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            @click="-->
<!--              (dialogVisible = true),-->
<!--                (title = '修改内容'),-->
<!--                edit(scope.$index, scope.row)-->
<!--            "-->
<!--            >编辑</el-button-->
<!--          >-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="danger"-->
<!--            @click="delete123(scope.$index, scope.row)"-->
<!--            >删除</el-button-->
<!--          >-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->
<!--    <el-pagination-->
<!--      @size-change="handleSizeChange"-->
<!--      @current-change="handleCurrentChange"-->
<!--      :current-page="pageNow"-->
<!--      :page-sizes="[1, 2, 4, 5, 7]"-->
<!--      :page-size="pageSize"-->
<!--      layout="total, sizes, prev, pager, next, jumper"-->
<!--      :total="total"-->
<!--    >-->
<!--    </el-pagination>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      pageNow: 1,-->
<!--      pageSize: 2,-->
<!--      total: 100,-->
<!--      tableData: [],-->
<!--      loc: "",-->
<!--      dname: "",-->
<!--      title: "",-->
<!--      dialogVisible: false,-->
<!--      add: {-->
<!--        dname: "",-->
<!--        loc: "",-->
<!--      },-->
<!--    };-->
<!--  },-->
<!--  created() {-->
<!--    this.pagelode();-->
<!--  },-->
<!--  methods: {-->
<!--    pagelode() {-->
<!--      var _this = this;-->
<!--      this.$http-->
<!--        .post("/dept/queryByPage", {-->
<!--          data: {-->
<!--            dname: _this.dname,-->
<!--            loc: _this.loc,-->
<!--          },-->
<!--          filed: "",-->
<!--          order: "",-->
<!--          pageNow: _this.pageNow,-->
<!--          pageSize: _this.pageSize,-->
<!--        })-->
<!--        .then(function (response) {-->
<!--          console.log(response.data);-->
<!--          if (response.data.code == 200) {-->
<!--            _this.tableData = response.data.data.list;-->
<!--            _this.total = response.data.data.total;-->
<!--          }-->
<!--        })-->
<!--        .catch(function (error) {-->
<!--          console.log(error);-->
<!--        });-->
<!--    },-->
<!--    handleSizeChange(val) {-->
<!--      this.pageSize = val;-->
<!--      this.pagelode();-->
<!--    },-->
<!--    handleCurrentChange(val) {-->
<!--      this.pageNow = val;-->
<!--      this.pagelode();-->
<!--    },-->
<!--    clearSerach() {-->
<!--      this.dname = "";-->
<!--      this.loc = "";-->
<!--      this.pagelode();-->
<!--    },-->
<!--    edit(index, row) {-->
<!--      console.log(row);-->
<!--      this.add.dname = row.dname;-->
<!--      this.add.loc = row.loc;-->
<!--      this.deptno = row.deptno;-->
<!--    },-->
<!--    delete123(index, row) {-->
<!--      var _this = this;-->
<!--      this.deptno = row.deptno;-->
<!--      this.$http-->
<!--        .post("/dept/delete",this.deptno)-->
<!--        .then(function (response) {-->
<!--          if (response.data.code == 200) {-->
<!--            _this.pagelode();-->
<!--          }-->
<!--        })-->
<!--        .catch(function (error) {-->
<!--          _this.pagelode();-->
<!--          console.log(error);-->
<!--        });-->
<!--    },-->
<!--    submitMsg() {-->
<!--      this.dialogVisible = false;-->
<!--      var uri = "/dept/add";-->
<!--      var _this = this;-->
<!--      if (this.title == "修改内容") {-->
<!--        uri = "/dept/edit";-->
<!--      }-->
<!--      this.$http-->
<!--        .post(uri, {-->
<!--          dname: _this.add.dname,-->
<!--          deptno: _this.deptno,-->
<!--          loc: _this.add.loc,-->
<!--        })-->
<!--        .then(function (response) {-->
<!--          if (response.data.code == 200) {-->
<!--            _this.pagelode();-->
<!--          }-->
<!--        })-->
<!--        .catch(function (error) {-->
<!--          _this.pagelode();-->
<!--          console.log(error);-->
<!--        });-->
<!--    },-->
<!--  },-->
<!--};-->
<!--</script>-->